<!doctype html>
<html lang="en">
<head>
	<title>LineChart - Overview</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			var dataQ1 = [{
				hardWare: "Desktops",
				sales: 64594.6
			}, {
				hardWare: "Notebooks",
				sales: 32760.69
			}, {
				hardWare: "Tablets",
				sales: 62973.35
			}, {
				hardWare: "Phones",
				sales: 23432.04
			}],
			dataQ2 = [{
				hardWare: "Desktops",
				sales: 74933.4
			}, {
				hardWare: "Notebooks",
				sales: 25261.26
			}, {
				hardWare: "Tablets",
				sales: 39395.51
			}, {
				hardWare: "Phones",
				sales: 41129.49
			}],
			dataQ3 = [{
				hardWare: "Desktops",
				sales: 39269.73
			}, {
				hardWare: "Notebooks",
				sales: 17746.36
			}, {
				hardWare: "Tablets",
				sales: 20775.42
			}, {
				hardWare: "Phones",
				sales: 16430.82
			}],
			dataQ4 = [{
				hardWare: "Desktops",
				sales: 55709.52
			}, {
				hardWare: "Notebooks",
				sales: 19976.28
			}, {
				hardWare: "Tablets",
				sales: 39878.09
			}, {
				hardWare: "Phones",
				sales: 18992.22
			}];

			$("#wijlinechartDefault").wijlinechart({
				type: "area",
				showChartLabels: false,
				hint: {
					content: function () {
						return this.y;
					},
					offsetY: -10
				},
				seriesStyles: [
					{ stroke: "#00A0B0", "stroke-width": 3 },
					{ stroke: "#CC333F", "stroke-width": 3 },
					{ stroke: "#EB6841", "stroke-width": 3 },
					{ stroke: "#EDC951", "stroke-width": 3 }
				],
				seriesHoverStyles: [
					{ "stroke-width": 4 },
					{ "stroke-width": 4 },
					{ "stroke-width": 4 },
					{ "stroke-width": 4 }
				],
				axis: {
					y: {
					},
					x: {
						labels: {
							style: {
								rotation: -45
							}
						},
						tickMajor: { position: "outside", style: { stroke: "#999999"} }
					}
				},
				//dataSource: data,
				data: {
					x: { bind: "hardWare" }
				},
				seriesList: [
					{
						dataSource: dataQ1,
						label: "Q1",
						legendEntry: true,
						data: {
							y: { bind: "sales" }
						},
						markers: {
							visible: false
						}
					},
					{
						dataSource: dataQ2,
						label: "Q2",
						legendEntry: true,
						data: {
							y: { bind: "sales" }
						},
						markers: {
							visible: false
						}
					},
					{
						dataSource: dataQ3,
						label: "Q3",
						legendEntry: true,
						data: {
							y: { bind: "sales" }
						},
						markers: {
							visible: false
						}
					},
					{
						dataSource: dataQ4,
						label: "Q4",
						legendEntry: true,
						data: {
							y: { bind: "sales" }
						},
						markers: {
							visible: false
						}
					}
				]
			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<h3>
				Gamers Online</h3>
			<div id="wijlinechartDefault" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px;">
			</div>
			<!-- End demo markup -->
			
		</div>
		<div class="footer demo-description">
		</div>
	</div>
</body>
</html>
